<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改列表标签')" />
    <link th:href="@{/ajax/libs/dqpx/css/dqpx.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-tab-edit" th:object="${tableTab}">
            <input id="id" name="id" th:field="*{id}" type="hidden">
            <input type="hidden" id="tableModelId" name="tableModelId" th:field="*{tableModelId}"></input>
            <h4 class="form-header h4">基本信息</h4>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">列表名称(英文名称)：</label>
                    <div class="col-sm-8">
                        <input name="tabName" th:field="*{tabName}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">列表标题：</label>
                    <div class="col-sm-8">
                        <input name="tabTitle" th:field="*{tabTitle}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">列表字段</h4>
            <div class="customBox boxSizing">
                <div class="leftCustom boxSizing">
                    <div class="navBox boxSizing">
                        <!--                <p class="oneTitle">参与互动</p>-->
                        <!--                <p class="twoTitle">主页帖子</p>-->
                        <!--                <p class="threeTitle">发消息</p>-->
                        <!--                <p>多媒体素材</p>-->
                        <!--                <p>点击量</p>-->
                        <!--                <p>知名度</p>-->
                    </div>
                </div>
                <div class="midCustom boxSizing">
                    <div class="searchWrap boxSizing">
                        <div class="searchInput">
                            <input type="text" class="inputText boxSizing" placeholder="搜索" />
                            <img th:src="@{/ajax/libs/dqpx/images/search.png}" class="searchImg" alt="">
                        </div>
                    </div>
                    <div class="dataList">
                        <p class="emptyData">找不到结果。</p>
                        <div class="areaWrap">
                            <!--                    <p class="title">-->
                            <!--                        <i class="checkectBox tick"></i>-->
                            <!--                        <span>参与活动</span>-->
                            <!--                    </p>-->
                        </div>
                    </div>
                </div>
                <div class="rightCustom boxSizing">
                    <p class="rightTitle">
                        <span>已选择</span>
                        <span class="num">21</span>
                        <span>栏</span>
                    </p>
                    <p class="listTitle">字段列表</p>
                    <ul class="selectList" id="select">
                        <!--                <li class="boxSizing">-->
                        <!--                    <i class="bit"></i>-->
                        <!--                    <span>主语互动</span>-->
                        <!--                    <i class="close"></i>-->
                        <!--                </li>-->
                    </ul>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/dqpx/js/Sortable.min.js}"></script>
    <script th:src="@{/ajax/libs/dqpx/js/data.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "table/tab";
        $("#form-tab-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var fieldIds = getAttrIds();
                if($.common.isEmpty(fieldIds)){
                    $.modal.alertWarning("请选择列表字段！");
                    return false;
                }
                var submitData = $('#form-tab-edit').serialize();
                submitData = submitData + "&fieldIds=" + fieldIds;
                $.operate.save(prefix + "/edit", submitData);
            }
        }

        var selectList = []  // 选中数组

        $(function (){
            getTabField();
        });


        function getTabField(){
            var config = {
                url: prefix + "/tabFieldList?tableTabId=" + $("#id").val() + "&tableModelId=" + $("#tableModelId").val(),
                type: "post",
                dataType: "json",
                success: function(result) {
                    // 数据初始化渲染
                    initRender(result.data,0);
                    // 渲染右侧数据
                    renderSelectList()
                },
                error: function(error) {
                    $.modal.alertWarning("查询失败！");
                }
            };
            $.ajax(config)
        }

        $('.emptyData').hide()





        // 渲染拖拽事件
        var select = document.getElementById('select')
        Sortable.create(select, {
            animation: 150,
            onUpdate: function (){
                let updateArr = []
                Array.from($('#select li')).forEach(item=>{
                    updateArr.push({
                        id:$(item).find('.close').attr('attr-id'),
                        title:$(item).find('span').text()
                    })
                })
                selectList = updateArr
            }
        });

        // 点击左侧，中间跳转对应的位置
        $('.leftCustom').on('click','.navBox p',function () {
            if($('.inputText ').val())return alert('搜索中无法触发')

            var id = $(this).attr('attr-id')

            // 左侧点击变色
            $('.leftCustom .navBox p').removeClass('on')
            $(this).addClass('on')

            // 中间滑到相应的位置
            var $oLi = $('.midCustom .areaWrap p[attr-id='+ id +']')
            var top = $('.dataList').scrollTop() + $oLi.offset().top - $('.dataList').offset().top
            $('.dataList').animate({scrollTop: top}, 150);
        })

        // 点击中间，选中或者取消，关联下级
        $('.areaWrap').on('click','p',function () {
            var attributeType = $(this).attr('attributeType')
            if(attributeType == '1'){
                return false
            }
            var isfield = $(this).attr('attr-isfield') // 是否是值
            var isfieldState = isfield == 'true'

            // 获取选中ele，判断是否选中
            var $checkectBox = $(this).find('.checkectBox')
            var isSelect = $checkectBox.hasClass('tick')
            var id = $(this).attr('attr-id') // 获取父级id
            var parentId = $(this).attr('parent-id') // 上级id

            // 当前级状态修改
            if(!isSelect){
                // 值则push
                if(isfieldState){
                    selectList.push({
                        title:$(this).find('span').text(),
                        id:id,
                    })
                    selectList = unique(selectList)
                }
            }else{
                // 值则删除
                if(isfieldState){
                    var index = selectList.findIndex(v=>v.id == id)
                    selectList.splice(index,1)
                }
            }

            $checkectBox.toggleClass('tick')
            // 下级关联状态取消
            checkLeve(id,!isSelect)

            // 渲染右侧列表
            renderSelectList()

            // 勾选关联上级
            enoughCheck(parentId)
        })

        // 右侧删除
        $('.rightCustom').on('click','.close',function () {
            var id = $(this).attr('attr-id')
            var $oLi = $(this).parent()
            var index = $oLi.index()

            // 中间列表选中取消
            var $midOLi = $('.midCustom .areaWrap p[attr-id='+ id+']' )
            var parentId = $midOLi.attr('parent-id') // 上级id
            $midOLi.find('.checkectBox').removeClass('tick')

            // 选中数据删除
            selectList.splice(index,1)
            $oLi.remove()
            $('.num').text(selectList.length)

            // 勾选关联上级
            enoughCheck(parentId)
        })

        // 搜索栏
        $('.inputText').on('keyup',function () {
            var value = $(this).val()

            if(!value){
                $('.midCustom .areaWrap p').show()
                $('.emptyData').hide()
            }else{
                var searchList = []
                var searchReg = new RegExp(value);
                var $title = $('.midCustom .areaWrap p')
                if($title.length>0){
                    Array.from($title).forEach(item=>{
                        // 非值隐藏
                        var isfield = $(item).attr('attr-isfield')
                        var text = $(item).find('span').text()

                        if(isfield){
                            // 值
                            if(searchReg.test(text)){
                                searchList.push(text)
                                $(item).show()
                            }else{
                                $(item).hide()
                            }
                        }else{
                            // 非值隐藏
                            $(item).hide()
                        }
                    })
                }
                $('.emptyData')[searchList.length==0?'show':'hide']()
            }
        })


        /**
         * 初始渲染
         * @param arr 数据数组
         * @param leve 层级
         */
        function initRender(arr,leve,checkect,parentId) {
            var leftStyle = {}  // 子层
            if(leve == 0){
                leftStyle = {
                    fontWeight:'bold'
                }
            }
            leve++
            for (var i = 0; i < arr.length; i++) {
                var item = arr[i]
                var isfield = item.isfield  // 是否是值
                var children = item.children  // 子层
                var attributeType = item.attributeType  // 子层

                // 排序
                if(children && children.length>0){
                    children = children.sort(function (a,b) { return a.sort - b.sort })
                }
                leftStyle.textIndent = leve * 10+'px'
                var id = item.id || Math.ceil(Date.now() * Math.random())
                // 接收上层选中，无则取默认参数
                var new_checkect = checkect || item.checkect  // 是否选中

                // 添加左侧数据
                /*var $left_p = $('<p>'+ item.title +'</p>')
                    .attr({
                        'attr-id':id,
                    })
                    .css(leftStyle)
                !isfield && $('.leftCustom .navBox').append($left_p) // 非值才可以添加*/

                // 中间添加数据
                var $mid_p = $('<p class="'+ ( attributeType=='1'?'disabled':'' ) +'"> <i class="checkectBox '+  (new_checkect?'tick':'') +'"></i> <span>'+ item.title +'</span></p>')
                    .addClass([
                        'title',
                        isfield?'':'type'
                    ])
                    .css('textIndent',leve * 10+'px')
                    .attr({
                        'attr-isfield':isfield,
                        'attr-id':id,
                        'parent-id':parentId,
                        'attributeType':attributeType,
                    })
                $('.midCustom .areaWrap').append($mid_p)

                // 非值添加数据
                if(isfield && new_checkect && attributeType!='1'){
                    selectList.push({
                        title:item.title,
                        id:String(id)
                    })
                }

                // 递归
                children && children.length>0 && initRender(children,leve,new_checkect,id)
            }
        }

        /*
        *  关联上下级
        * */
        function checkLeve(id,state) {
            var $p = $('p[parent-id=' + id + ']')

            // 下级删除
            if($p.length>0){
                Array.from($p).forEach(element=>{
                    var isfield = $(element).attr('attr-isfield')  // 是否是值
                    var childId = $(element).attr('attr-id') // 获取父级id
                    var isfieldState = isfield == 'true'
                    var attributeType = $(element).attr('attributeType')

                    // 判断状态勾选
                    if(attributeType!='1'){
                        if(state){
                            // 勾选
                            $(element).find('.checkectBox').addClass('tick')

                            // 值则push
                            if(isfieldState ){
                                selectList.push({
                                    title:$(element).find('span').text(),
                                    id:childId,
                                })

                                selectList = unique(selectList)
                            }
                        }else{
                            // 取消勾选
                            $(element).find('.checkectBox').removeClass('tick')

                            // 值则删除
                            if(isfieldState){
                                var index = selectList.findIndex(v=>v.id == childId)
                                selectList.splice(index,1)
                            }
                        }
                    }


                    // 下级状态改变
                    checkLeve(childId,state)
                })
            }
        }


        /**
         *  渲染选中数组
         */
        function renderSelectList() {
            $('.rightCustom .selectList').empty()
            $('.num').text(selectList.length)
            selectList.forEach(item=>{
                var $oLi = $('<li class="boxSizing"><i class="bit"></i><span>'+ item.title +'</span><i class="close" attr-id="'+ item.id +'"></i></li>')
                $(".rightCustom .selectList").append($oLi)
            })
        }

        /**
         * 勾满足选中
         * @param parent-id 改变状态的parent-id
         */
        function enoughCheck(parentId) {
            if(!parentId)return false
            var $title = $('.midCustom .areaWrap p[parent-id='+ parentId+']')
            var $select = $title.find('.tick')

            // 判断是否相等给与状态
            var selectState = $title.length == $select.length

            // 赋予上一层状态
            var $parent = $('.midCustom .areaWrap p[attr-id=' + parentId + ']')
            var id = $parent.attr('parent-id')
            $parent.find('.checkectBox')[
                selectState?'addClass':'removeClass'
                ]('tick')

            // 继续寻找上一层
            enoughCheck(id)
        }

        // 数组去重
        function unique(arr){
            for(var i=0; i<arr.length; i++){
                for(var j=i+1; j<arr.length; j++){
                    if(arr[i].id==arr[j].id){         //第一个等同于第二个，splice方法删除第二个
                        arr.splice(j,1);
                        j--;
                    }
                }
            }
            return arr;
        }

        function getAttrIds() {
            // 使用 jQuery 选择所有具有 class 'close' 的元素，并获取 attr-id 属性值
            const ids = $("#select .close").map(function() {
                return $(this).attr("attr-id");
            }).get(); // 使用 .get() 将 jQuery 对象转换为数组

            // 将数组用逗号拼接成字符串
            return ids.join(",");
        }
    </script>
</body>
</html>
